We then call TodoDataService.createTodo(data,props.token) we implemented earlier in /services/todo.js:

Analyze Code

createTodo(data, token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.post("http://localhost:8000/api/todos/", data);

}

This then routes to todobackend/api/views.py in our backend and calls TodoListCreate view to create the todo

instance in the backend database.

Analyze Code

class TodoListCreate(generics.ListCreateAPIView):

# ListAPIView requires two mandatory attributes, serializer_class and

# queryset.

# We specify TodoSerializer which we have earlier implemented

serializer_class = TodoSerializer

permission_classes = [permissions.IsAuthenticated]

def get_queryset(self):

user = self.request.user

return Todo.objects.filter(user=user).order_by('-created')

def perform_create(self, serializer):

#serializer holds a django model

serializer.save(user=self.request.user)

Hopefully, you can see better how the whole flow in a Django React stack works now. Let ’ s go on to implement

editing a todo.

Add Todo Link

In our TodosList component, we will display a ‘ Add Todo ’ link for users to navigate to the AddTodo component.

In todos-list.js, add the below codes in bold:

Modify Bold Code

…

const TodosList = props => {

…

return (

<Container>

{props.token == null || props.token === "" ? (

<Alert variant='warning'>

You are not logged in. Please <Link to={"/login"}>login</Link> to see your todos.

</Alert>

) : (

<div>

<Link to={"/todos/create"}>

<Button variant="outline-info" className="mb-3">

Add To-do

</Button>

</Link>

{todos.map((todo) => {

…

This renders a ‘ Add To-do ’ button (fig. 4).

Figure 4

Running our App